<h1 mat-dialog-title>{{ 'Save As Preset' | translate }}</h1>
<form [formGroup]="form" (submit)="onSubmit()">
  <div mat-dialog-content>
    <p>{{ 'Save current ACL entries as a preset for future use.' | translate }}</p>

    <div class="exist-content">
      <h4 class="label">{{ 'Existing presets' | translate }}:</h4>
      <div class="presets">
        @for (preset of presets; track preset.id) {
          <div class="preset" [ngClass]="{ 'preset-disabled': !isCurrentAclType(preset.acltype) }">
            <div class="preset-name">{{ preset.name }}</div>
            <div class="preset-type">{{ preset.acltype }}</div>
            @if (!preset.builtin) {
              <button
                ixTest="remove-preset"
                type="button"
                mat-icon-button
                class="preset-remove"
                [attr.aria-label]="'Remove preset' | translate"
                (click)="onRemovePreset(preset)"
              >
                <ix-icon name="cancel"></ix-icon>
              </button>
            }
          </div>
        }
      </div>
    </div>

    <div class="save-content">
      <h4 class="label">{{ 'Save ACL as preset' | translate }}:</h4>
      <ix-input
        formControlName="presetName"
        [label]="'Preset Name' | translate"
      ></ix-input>
    </div>
  </div>

  <ix-form-actions mat-dialog-actions class="form-actions">
    <button mat-button matDialogClose ixTest="cancel">{{ 'Cancel' | translate }}</button>
    <button
      mat-button
      color="primary"
      type="submit"
      ixTest="save"
      [disabled]="form.invalid || isFormLoading()"
    >
      {{ 'Save' | translate }}
    </button>
  </ix-form-actions>
</form>
